<template>
  <div class="view-home">
    <div class="head">
      <!-- 遮罩 -->
      <div class="mask">
        <!-- 站长头像 -->
        <div>
          <img :src="admin.avatar" alt="" />
        </div>
        <!-- 座右铭 -->
        <div class="matto">
          <p>{{ admin.signature }}</p>
        </div>
      </div>
      <!-- 定位到内容 -->
      <div class="down">
        <a href="#homeMain"><i class="el-icon-arrow-down"></i></a>
      </div>
    </div>

    <!-- 内容 -->
    <div class="main" id="homeMain">
      <layout-col>
        <template #left>
          <!-- 插槽使用: 添加"item"类即可产生卡片样式, item之外可以再自定义别的样式类 -->

          <!-- 左区 文章列表 -->
          <div class="left-col">
            <!-- <ul
              class="infinite-list"
              v-infinite-scroll=""
              style="overflow: auto"
            > -->
            <ul class="infinite-list">
              <li
                class="item article-list-big"
                v-for="article in articles"
                :key="article.id"
              >
                <!-- 文章封面 -->
                <div
                  class="article-cover"
                  @click="handleSelectArticle(article.id)"
                >
                  <div class="mask"></div>
                  <img :src="article.cover_picture" alt="" />
                </div>
                <div class="article-brief">
                  <p class="time">
                    <i class="el-icon-time"></i> 发布于{{
                      article.created_time.substr(0, 10)
                    }}
                    <span class="mask"></span>
                  </p>
                  <h3 class="title" @click="handleSelectArticle(article.id)">
                    {{ article.title }}
                  </h3>
                  <p class="info">
                    <span class="recommend" v-show="article.is_recommend"
                      ><i class="el-icon-star-on"></i> 推荐
                      <div class="mask"></div
                    ></span>
                    <span
                      class="category"
                      @click="
                        $router.push(`/category?id=${article.category_id}`)
                      "
                      ><i class="el-icon-menu"></i> {{ article.category_name }}
                    </span>
                    <span class="comment"
                      ><i class="el-icon-s-comment"></i>
                      {{ article.comments_num }}
                    </span>
                    <span class="visitCount"
                      ><i class="el-icon-view"></i> {{ article.visit_count }}
                    </span>
                  </p>
                  <p class="description">{{ article.description }}</p>
                </div>
              </li>
            </ul>
            <el-button @click="load">加载更多</el-button>
          </div>
        </template>
        <!-- 右区 -->
        <template #right>
          <div class="right-col">
            <!-- 站长介绍 -->
            <!-- <div class="item admin">
              <div>站长头像</div>
              <p>站长签名</p>
              <span>站长微信</span>
              <span>站长邮箱</span>
              <span>站长码云</span>
              <span>站长语雀</span>
            </div> -->
            <!-- 天气 -->
            <div class="item weather">
              <div id="he-plugin-standard"></div>
              <!-- <span class="mask"></span> -->
            </div>
            <!-- 时间 -->
            <div class="item time">
              <div class="clock">
                <iframe width="252" height="250" src="/clock/index.html">
                </iframe>
                <span class="mask"></span>
              </div>
            </div>
            <div class="item recommend">
              <h2>推荐文章</h2>
              <ul>
                <li
                  class="recommend-article"
                  v-for="article in recommendArticles"
                  :key="article.id"
                >
                  <!-- 推荐文章封面 -->
                  <div
                    class="article-cover"
                    @click="handleSelectArticle(article.id)"
                  >
                    <div class="mask"></div>
                    <img :src="article.cover_picture" alt="" />
                  </div>
                  <div class="article-brief">
                    <h3 class="title" @click="handleSelectArticle(article.id)">
                      {{ article.title }}
                    </h3>
                    <p class="info">
                      <span>{{ article.created_time.substr(0, 10) }}</span>
                      <!-- <span class="category">{{ article.category_name }}</span> -->
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </layout-col>
    </div>
  </div>
</template>
<script>
import LayoutCol from '@/components/LayoutCol.vue'
export default {
  name: 'HomeViewHome',
  components: { LayoutCol },
  created() {
    this.getArticles()
    this.getRecommendArticles()
    this.getAdminInfo()
    // console.log(
    //   '获取自定义样式',
    //   getComputedStyle(document.body)
    //     .getPropertyValue('--weather-font')
    //     .substr(2, 6)
    // )
    //和风天气插件调用
    window.WIDGET = {
      CONFIG: {
        layout: '2',
        width: '250',
        height: 270,
        background: '5',
        dataColor: 'ff638a',
        backgroundColor: '5',
        // dataColor: '000000',
        // backgroundColor: 'FFFFFF',
        key: '4a0c35464248447992d572a4bff4c59c',
      },
    }
    this.getWeather(document)
  },
  data() {
    return {
      // 文章列表
      articles: [],
      // 推荐文章列表
      recommendArticles: [],
      // 文章列表当前已加载前n页
      page: 1,
      admin: '',
    }
  },
  methods: {
    // 获取天气信息
    getWeather(d) {
      var c = document.createElement('link')
      c.rel = 'stylesheet'
      c.href =
        'https://widget.qweather.net/standard/static/css/he-standard.css?v=1.4.0'
      var s = document.createElement('script')
      s.src =
        'https://widget.qweather.net/standard/static/js/he-standard.js?v=1.4.0'
      var sn = d.getElementsByTagName('script')[0]
      sn.parentNode.insertBefore(c, sn)
      sn.parentNode.insertBefore(s, sn)
    },
    // 获取站长信息
    getAdminInfo() {
      // GET /login/getinfo/admin
      this.$http.get(`/login/getinfo/admin`).then((res) => {
        const { code, msg, result } = res
        if (code == 0) {
          this.admin = result
          // console.log('admin', this.admin)
        }
      })
    },
    // 获取文章列表 (再获取一页)
    getArticles() {
      this.$http.get(`/articles?page=${this.page}&size=3`).then((res) => {
        const { code, msg, result } = res
        if (code == 0) {
          if (result.articles.length == 0) {
            this.$message({
              showClose: true,
              message: '没有更多了哟~',
            })
          }
          this.articles = this.articles.concat(result.articles)
        }
      })
    },
    // 获取推荐文章列表
    getRecommendArticles() {
      //
      this.$http.get('/articles?is_recommend=1').then((res) => {
        // console.log(res)
        this.recommendArticles = res.result
      })
    },
    // 点击文章列表, 跳转到文章详情页
    handleSelectArticle(id) {
      // 通过编程式导航, 跳转到 /admin/user/add 路由
      // 写法1: /admin/user/add   /开头为绝对
      // 写法2: user/add   无/为相对
      // 导航到/add组件
      // console.log(this.$route) // 保存当前的URL
      this.$router.push(`/article?id=${id}`)
    },
    // 再加载一页 (5条) 文章列表
    load() {
      // console.log('load')
      this.page += 1
      // this.articles += this.articles
      this.getArticles()
    },
    // 提交 登录/注册 表单
    login() {},
  },
}
</script>

<style lang="stylus" scoped>
@import '~styles/theme.styl';
.view-home
  transition: all .5s;
  // 巨幕
  .head
    // position relative
    height: 100vh
    background-image: url("@/assets/images/首页图.jpg");
    background-size: cover;
    background-position: center center;
    // 巨幕遮罩
    .mask
      display flex
      flex-direction: column
      align-items center
      justify-content center
      width: 100%
      height: 100%
      background var(--mask)
      // 站长头像
      img
        width: 120px
        height: 120px
        border-radius: 120px
        border: 2px solid rgba(0,0,0,0.1)
        box-sizing: border-box
      // 站长座右铭
      .matto
        min-width:400px;
        max-width: 520px;
        width: 40%;
        height: 60px
        margin-top: 22px;
        padding 0 15px
        line-height 60px
        text-align center
        font-size: 15px;
        overflow: hidden;
        background: var(--transparentDiv);
        // text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 15px;
        box-sizing: border-box
        transition: all 0.5s;
        p
          font-weight: bolder;
          background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-size: 200% 100%;
          animation: masked-animation 5s infinite linear;
    // 定位到内容
    .down
      position: absolute;
      bottom: 50px;
      left: calc(50% - 20px);
      cursor: pointer;
      z-index: 5;
      i
        color: var(--color)
        font-size: 40px
        font-weight 700
        animation: float 2s linear infinite;

  // 遮罩
  .mask
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index: 2
    background var(--mask)
    transition: all .6s
    & + img
      transition: all .6s
    &:hover + img
      transform: scale(1.1);
  .main
    // .infinite-list
    //   height:1000px
    .left
      .item
        padding: 0
    // 左区
    .left-col
      ul
        li
          &:hover img
            transform: scale(1.1);
      .article-list-big
        display flex
        height: 300px
        overflow hidden
        // &:hover
        //   box-shadow: 1px 1px 5px 5px rgba(255, 99, 138,0.5);
        .article-cover
          flex: 3
          position relative
          overflow hidden
          img
            width: 100%
            height: 100%
            border-radius: 10px 0 0 10px
            transition: all .6s
        .article-brief
          flex: 2
          padding-left: 30px;
          margin 20px 10px 10px 0
          .time
            position relative
            padding: 5px 10px;
            width: max-content;
            background-color: #fff5e0
            font-size: 12px;
            font-weight: bolder;
            color: #ffcc00;
            border-radius: 6px;
          .title
            // margin: 20px 0
            padding: 10px 8px 25px 8px;
            text-align right
            font-size 18px
            font-weight: bolder
            transition: color .2s ease-out
            &:hover
              color: #ff638a
          .description
            margin-top: 30px
            padding: 0 8px
            font-size 15px
          .info
            display flex
            justify-content: right
            align-items end
            font-size 13px
            height: 25px
            .recommend
              position: relative
              padding: 6px 12px
              width: max-content
              background-color: #fff5e0
              font-size: 12px
              font-weight: bolder
              color: #ffcc00
              border-radius: 6px
            span
              margin: 0px 10px
              padding 3px 0
              white-space: nowrap;
              &.category
                transition: color .2s ease-out
                &:hover
                  color: #ff638a
      .el-button
        width: 100%
        border-radius: 10px
        margin: 20px auto
        background var(--div)
    // 右区
    .right-col
      ul
        li
          &:hover img
            transform: scale(1.1);
      .weather
        position relative
        display flex
        justify-content: center;
        .mask
          border-radius: 10px
      .time
        .clock
          position relative
          width:250px
          margin: 0 auto 10px auto
          overflow hidden
          border-bottom 1px dashed #dbd0a7
      .recommend
        padding-right 15px
        h2
          padding-left 5px
          font-size: 16px
          font-weight bold
        .recommend-article
          display flex
          margin: 12px 5px 3px 5px;
          .article-cover
            position relative
            width: 96px;
            height: 60px;
            border-radius: 10px
            overflow: hidden;
            img
              width 100%
              height 100%
              transition: all .6s
          .article-brief
            flex: 1
            padding-left: 10px;
            h3
              transition: all .3s ease-out 0s;
              font-size: 14px;
              font-weight bold
              word-break: break-all;
              transition: color .2s ease-out
              &:hover
                color: #ff638a
            p
              display flex
              font-size: 12px;
              justify-content space-between
              margin-top: 10px;
              white-space: nowrap
              .category
                font-size 14px

@keyframes masked-animation
  0%
    background-position: 0 0
  100%
    background-position: -100%, 0
@keyframes float
  0%
    transform translateY(0)
  50%
    transform translateY(-6px)
  100%
    transform translateY(0)
</style>
